<template>
	<!-- 待清缴数据页面 -->
	<view class="dqj">
		<view class="title">
			<text>待清缴页面</text>
			<text class="iconfont icon-sousuo" @click="search"></text>
		</view>
		<view class="tabPage">
			<view :class="tabAction=='tabItem1'?'tabAction':''" @click="tabChange('item1')">
				<text>我是出租方</text>
				<uni-badge class="uni-badge-left-margin slTip" :max-num="9999" :text="nsrsl" v-if="nsrsl==0?false:true" />
			</view>
			<view :class="tabAction=='tabItem2'?'tabAction':''" @click="tabChange('item2')">
				<text>我是承租方</text>
				<uni-badge class="uni-badge-left-margin slTip" :max-num="9999" :text="czrsl" v-if="czrsl==0?false:true" />
			</view>
		</view>
		<view class="sbLists">
			<uni-group v-for="item in qjLists" :key="item.id" class="dqjItem">
				<view class="sbtitle">
					<view>申报流水号：{{item.sblsh}}</view>
					<view class="qjk" @click="goDqjmx(JSON.stringify(item))">
						<text>去缴款</text>
						<uni-icons type="forward" size="20rpx"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="name">房屋地址</view>
					<view class="con">{{item.address}}</view>
				</view>
				<view class="item">
					<view class="name">租金所属期</view>
					<view class="con">{{item.zzssq}}</view>
				</view>
				<!-- 				<view class="item">
					<view class="name">应纳税额</view>
					<view class="con">{{item.ynse}}</view>
				</view>
				<view class="item">
					<view class="name">减免税额</view>
					<view class="con">{{item.jmse}}</view>
				</view> -->
				<view class="item">
					<view class="name">应补(退)税额</view>
					<view class="con">{{item.ybtse}}</view>
				</view>
				<view class="item">
					<view class="sbZnj">
						<view class="znjShow">
							<view class="name">滞纳金</view>
							<view class="con">{{item.znj}}</view>
						</view>
						<view class="znjTip">
							（根据《中华人民共和国税收征收管理法》，从滞纳税款之日起，按日加收滞纳税款万分之五的滞纳金。本申报显示的滞纳金金额计算截至<text
								style="color:red;font-weight: bold;">{{$commonCzwjs.date(item.sbrq.slice(0,10),"年月日")}}</text>。若您未于当日清缴税费，滞纳金仍将相应增加，以实际清缴时的金额为准。)
						</view>
					</view>
				</view>
				<view class="item">
					<view class="name  hj">合计</view>
					<view class="con">{{item.hj}}</view>
				</view>
			</uni-group>
		</view>
		<!-- 		<view class="znjTip">
			根据《中华人民共和国税收征收管理法》，从滞纳税款之日起，按日加收滞纳税款万分之五的滞纳金，以实际清缴时的金额为准。
		</view> -->
	</view>
</template>

<script>
	import {
		queryYstNsrwqjqSfxx
	} from "@/utils/common-api.js"
	export default {
		data() {
			return {
				dqjcxData: {
					xzqhszDm: "",
					address: "",
					type: ""
				},
				dqjmxData: {
					djxh: "",
					sbId: "",
				},
				tabAction: "tabItem1",
				qjLists: [],
				nsrList: [],
				czrList: [],
				nsrsl: "0",
				czrsl: "0",
				sbxx: ""
			}
		},
		onLoad(e) {
			if (e.type == "sfsb") {
				let sbxx = JSON.parse(e.sbxx)
				this.sbxx = sbxx
			}
		},
		async onShow() {
			// 清缴查询
			if (uni.getStorageSync("dqjcxData")) {
				this.dqjcxData = JSON.parse(uni.getStorageSync("dqjcxData"));
			} else {
				// 不存在则清空
				this.dqjcxData = {
					xzqhszDm: "",
					address: "",
					type: ""
				}
			}
			// 税费申报跳转至缴款
			if (this.sbxx) {
				this.dqjcxData = {
					xzqhszDm: "",
					address: this.sbxx.address,
					type: ""
				}
				uni.setStorageSync("dqjcxData", JSON.stringify(this.dqjcxData))
				if (this.sbxx.nsrlx == "02") {
					this.tabAction = "tabItem1"
				} else {
					this.tabAction = "tabItem2"
				}
			}
			await this.nsrsjqq()
			await this.czrsjqq()
			if (this.sbxx) {
				if (this.sbxx.nsrlx == "02") {
					this.qjLists = this.nsrList
				} else {
					this.qjLists = this.czrList
				}
			} else {
				this.qjLists = this.nsrList
			}
			this.sbxx = "";
		},
		onHide() {

		},
		methods: {
			// 跳转查询页面
			search() {
				this.$commonCzwjs.goPage({
					url: "/pages/sfqj/qjsjcx"
				})
			},
			// 切换tab页 
			async tabChange(data) {
				if (data == 'item1') {
					this.tabAction = "tabItem1"
					// await this.nsrsjqq()
					this.qjLists = this.nsrList
				}
				if (data == 'item2') {
					this.tabAction = "tabItem2"
					// await this.czrsjqq()
					this.qjLists = this.czrList

				}
			},
			// 出租方数据请求
			async nsrsjqq() {
				let lists = await queryYstNsrwqjqSfxx({
					...this.dqjcxData,
					type: "0"
				})
				if (lists.head.errorCode == "0" && lists.body) {
					this.nsrList = lists.body
					this.nsrsl = lists.body.length || "0"
				} else if (lists.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
				console.log(lists)
			},
			// 出租方数据请求
			async czrsjqq() {
				let lists = await queryYstNsrwqjqSfxx({
					...this.dqjcxData,
					type: "1"
				})
				if (lists.head.errorCode == "0" && lists.body) {
					this.czrList = lists.body
					this.czrsl = lists.body.length || "0"
				} else if (lists.head.errorCode != "0") {
					uni.showToast({
						title: '数据请求失败',
						icon: 'error',
						duration: 3000
					})
				}
			},
			// 跳转
			goDqjmx(val) {
				val = JSON.parse(val)
				let params = {
					sbId: val.sbId,
					djxh: val.djxh,
				}
				this.$commonCzwjs.goPage({
					url: "/pages/sfqj/dqjmx",
					key: "dqjData",
					data: params
				})
			}
		}
	}
</script>

<style>
	.title {
		width: 100%;
		height: 80rpx;
		background: #3171d5;
		text-align: center;
		line-height: 80rpx;
		color: white;
	}

	.title .iconfont {
		float: right;
		margin-right: 36rpx;
		font-size: 40rpx;
	}

	.tabPage {
		display: flex;
		height: 90rpx;
		font-size: 30rpx;
	}

	.tabPage>view {
		text-align: center;
		height: 90rpx;
		line-height: 90rpx;
		flex: 1;
		background: #007aff57;
		color: #ffffff;
	}

	.tabPage .slTip {
		position: relative;
		bottom: 20rpx;
	}

	.tabPage .tabAction {
		color: black;
		background: #ffffff;
		font-weight: bold;
	}

	.sbLists {
		padding: 0 20rpx;
		box-sizing: border-box;
		width: 100%;
		font-weight: bold;
		font-size: 26rpx;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}

	.dqjItem {
		background: #ffffff;
		margin-top: 20rpx;
		border: 2rpx solid #e7e7e7;
	}

	.sbtitle {
		padding: 20rpx 0 20rpx 20rpx;
		border-bottom: 5rpx solid #3171d5;
		color: #3171d5;
		display: flex;
		justify-content: space-between;
	}

	.sbLists .qjk {
		margin-right: 20rpx;
	}

	.qjk .uniui-forward {
		color: #3171d5 !important;
	}

	::v-deep .uni-group .uni-group__content {
		padding: 0;
	}

	.uni-group__content {
		padding: 0;
	}

	.sbLists .item {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #66666640;
	}

	.sbLists .item:last-child {
		border-bottom: 0rpx solid #66666640;
	}

	.sbLists .item .name {
		width: 180rpx;
		color: #66666699;
		text-align: left;
		margin-right: 10rpx;
		padding-left: 20rpx;

	}

	.sbLists .item .con {
		color: #222222;
		text-align: left;
	}

	.sbLists .item .hj {
		color: #222222;
	}

	.znjShow {
		display: flex;
	}

	.znjTip {
		padding: 0 20rpx;
		font-weight: 400;
		color: #666666;
		background: #ffffff;
		font-size: 20rpx;
	}
</style>